<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /*
    webpack是一个现代js的应用程序的静态模块打包工具，当webpack处理应用程序时，他会在内部构件一个依赖图，此依赖图会映射项目所需的每一个模块并生成一个或者多个bundle包，webpack本身是基于node.js开发的
    (他如何找到js，如何建立依赖，如何建立模块，咱们的webpack是基于node.js开发的，用的是里面的fs模块进行的读取操作)
    grunt
    gulp
    fis
    webpack
    snowpack

    webpack的作用：
    + 代码转换：ts编译成js；less、scss编译成css；es6、es7编译成es5；虚拟dom编译成真实dom等,CommonJS规范，ES6中的Module导入导出规范
    + 文件优化：压缩js、css、html文件；压缩合并图片，图片base64等
    + 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码
    + 模块合并：在采用模块化的项目里，会有多个模块和文件需要构建功能把模块分类合并成一个文件
    + 自动刷新：监听本地源代码的变化，自动重新构建，刷新浏览器
    + 代码校验：ESLint代码规范校验，和检查，单元检测等
    + 自动发布：自动构建出线上发布代码并传输给发布系统
    (webpack本身不大，但是咱们要是实现某一些功能，还要往webpack中加一个模块来实现)
     */

    index.css;
    reset.min.css;

    dist/main.min.css

  </script>
</body>

</html>